<template>
	<view class="person-list">
		<Card class="person-list-warp" :title="title">
      <view class="person-list-item" v-for="(item, index) in list" :key="index" :style="itemPaddingBottomStyle(index)">
        <view class="person-list-item-avatar">{{ item.mjmc }}</view>
        <view class="person-list-item-info">
          <text class="person-list-item-info-main">{{ item.mjjh }}&nbsp;{{ item.zzmc }}</text>
          <text class="person-list-item-info-sub">{{ item.mjlxdh }}</text>
        </view>
        <view class="person-list-item-tools">
          <template v-if="mode === 'default'">
             <t-button size="extra-small" theme="primary" variant="text" @click.stop="onFilterChart(item)">筛选</t-button>
             <t-button size="extra-small" theme="danger" variant="text" @click.stop="onDeletePerson(item)">移除</t-button>
          </template>
          <template v-if="mode === 'personSelect'">
            <t-button size="extra-small" theme="danger" variant="text" @click.stop="onDeletePerson(item)">移除</t-button>
          </template>
          <template v-if="mode === 'at'">
            <t-button size="extra-small" theme="primary" variant="text" @click.stop="onAddAt(item)">添加@</t-button>
          </template>
        </view>
      </view>
    </Card>
	</view>
</template>

<script setup>
	import { ref, defineProps, onMounted, watch } from "vue"
  import Card from "@/components/Card.vue"

  const emit = defineEmits(['onDelete'])
  const props = defineProps({
		title: {
      type: String,
      default: '人员列表'
    },
    mode: {
      type: String, // default | personSelect | at
      default: 'default'
    },
    propList: {
      type: Array,
      default: () => []
    },
	})

  onMounted(() => {
    getList();
  })

  watch(() => props.propList, () => {
    list.value = props.propList
  }, {  deep: true })

  const list = ref([])
  const itemPaddingBottomStyle = (index) => {
    if (index == list.value.length - 1 && props.mode === 'default') return 'padding-bottom: 0;'
    return ''
  }
  
  const getList = () => {
    console.log('getList',props.propList );
    
    if (Array.isArray(props.propList) && props.propList.length) return;
    list.value = [
      { mjjh: '302871', mjmc: '熊倡熊', zzmc: '科信科', mjlxdh: '17356686812' },
      { mjjh: '302871', mjmc: '熊倡熊熊', zzmc: '科信科', mjlxdh: '17356686812' },
      { mjjh: '302871', mjmc: '熊倡', zzmc: '科信科', mjlxdh: '17356686812' },
      { mjjh: '302871', mjmc: '熊倡', zzmc: '科信科', mjlxdh: '17356686812' },
    ]
  }

  const onFilterChart = item => {
    console.log('onFilterChart')
  }

  const onDeletePerson = item => {
    emit('onDelete', item)
  }

  const onAddAt = item => {
    emit('onAddAt', item)
  }
</script>

<style lang="scss" scoped>
.person-list {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  row-gap: 12px;

  &-warp {
    max-height: 100%;
    overflow: auto;
  }

  &-item {
    display: flex;
    align-items: center;
    padding: 12px 6px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.07);

    &:last-child {
      border-bottom: none;
    }

    &-avatar {
      width: 42px;
      height: 42px;
      display: flex;
      justify-content: center;
      align-items: center;
      word-break: keep-all;
      font-size: 13px;
      border-radius: 50%;
      color: #fff;
      background-color: var(--td-brand-color);
    }

    &-info {
      flex: 1;
      margin-left: 12px;
      display: flex;
      flex-direction: column;

      &-main {
        font-size: 15px;
        // font-weight: 500;
        color: #444444;
      }

      &-sub {
        margin-top: 4px;
        font-size: 14px;
        color: #666666;
      }
    }

    &-tools {
      display: flex;
      justify-content: flex-end;
    }
  }

  // .card-content {
    
  // }
}
</style>